<template>
  <div style="color: red">事件捕获和事件冒泡</div>
  <br />
  <div>事件委托就是利用事件冒泡的机制，减少事件的绑定，提高效率</div>
  <div class="dome" @click="handle($event, 3)">
    我是dome
    <div class="dome2" @click="handle($event, 2)">
      我是dome2
      <div class="dome3" @click="handle($event, 1)">我是dome3</div>
    </div>
  </div>

  <ul @click="handleUl">
    <li v-for="item in liList" :key="item.id">{{ item.name }}</li>
  </ul>

  <br />
  <div style="color: red">阻止默认行为的方式</div>
  <p>1.e.preventDefault()</p>

  <a href="http://www.baidu.com" @click="jump">百度</a>

  <form action="http://www.baidu.com">
    <input type="submit" value="提交" id="submit" @click="jump" />
  </form>

  <button @click="forward">forward</button>
</template>

<script setup lang="ts" name="Bubbling">
import { reactive } from "vue";
const History = window.history;
const handle = (e: any, num: number) => {
  // e.stopPropagation();
  alert(e.target.innerHTML + "----" + num);
};

const forward = () => {
  History.forward();
};

const liList = reactive([
  { id: 1, name: "hello" },
  { id: 2, name: "hello2" },
  { id: 3, name: "hello3" },
]);
const handleUl = (e: any) => {
  alert(e.target.innerHTML);
};

const jump = (e: any) => {
  console.log("阻止默认事件");
  e.preventDefault();
};
</script>

<style scoped lang="scss">
.dome {
  background-color: pink;
  cursor: pointer;
  padding: 20px;
  .dome2 {
    background-color: red;
    padding: 20px;
    .dome3 {
      background-color: orangered;
      padding: 20px;
    }
  }
}

ul {
  margin-top: 5px;
  background-color: pink;
  li {
    margin-top: 5px;
    background-color: orange;
    padding: 5px;
    cursor: pointer;
  }
}
</style>
